<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>任务七：实现常见的技术产品官网的页面架构及样式布局</title>
	<link rel="stylesheet" type="text/css" href="css/task11.css">
</head>
<body>
<header class="header">
	<div class="layout">
		<div class="logo">
			<img src="images/logo.png">
			<span>新世界</span>
		</div>
		<div class="menu">
			<ul>
				<li><a href="" class="current">首页</a></li>
				<li><a href="">最新活动</a></li>
				<li><a href="">项目介绍</a></li>
				<li><a href="">爱心社区</a></li>
				<li><a href="">关于我们</a></li>
			</ul>
			<img class="person" src="images/person.png">
			<a href="" class="login">登录</a>
		</div>
	</div>
</header>
<div class="main">
	<label class="title">Time of new life</label>
	<label class="subtitle">新时代，年轻的人们让我们一起</label>
	<label class="subtitle">体验新生活，享受新生活</label>
	<button class="begin">开始体验</button>
</div>
<div class="meaning">
	<div class="item"><img src="images/meaning1.png" alt=""><div>打造全新世界观，让你更爱你的生活</div></div>
	<div class="item"><img src="images/meaning2.png" alt=""><div>丰富多彩的公益活动，发挥新世界的主人公意识</div></div>
	<div class="item"><img src="images/meaning3.png" alt=""><div>时尚的新理念，超前体验未知的生活</div></div>
	<div class="item"><img src="images/meaning4.png" alt=""><div>完善的培养机制，培养你全新的世界观</div></div>
</div>
<div class="question">
	<img src="images/big_logo.png" alt="">
	<div>关于新世界，还有什么你不知道的？</div>
</div>
<div class="city">
	<div class="select">
		<label class="main-label">查找新世界城市活动信息</label>
		<hr>
		<label class="sub-label">每个城市都有不同活动信息，请自主查询您所需要了解的城市</label>
	</div>
	<div class="city-select">
		<select>
			<option value="">中国</option>
		</select>
		<select name="" id="">
			<option value="">省份</option>
			<option value="">北京市</option>
			<option value="">天津市</option>
			<option value="">河北省</option>
			<option value="">陕西省</option>
			<option value="">内蒙古自治区</option>
		</select>
		<select name="" id="">
			<option value="">城市</option>
		</select>
		<input type="button" name="" value="搜索">
	</div>
</div>	
<div class="gallary">
	<!-- <img src="/images/gallary.png" alt=""> -->
	<div class="content">
		<div class="item">
			<div class="gallary-bg gallary1">
				<div class="picture"></div>
			</div>
			<div class="introduction">
				<label class="main-label">北京活动</label>
				<br/>
				<label class="sub-label">新社区大联盟</label>
			</div>
		</div>
		<div class="item item2">
			<div class="introduction">
				<label class="main-label">上海活动</label>
				<br/>
				<label class="sub-label">夜上海景观探索</label>
			</div>
			<div class="gallary-bg gallary2">
				<div class="picture"></div>
			</div>
			
		</div>
		<div class="item">
			<div class="gallary-bg gallary3">
				<div class="picture"></div>
			</div>
			<div class="introduction">
				<label class="main-label">深圳活动</label>
				<br/>
				<label class="sub-label">全新海岸线观点站</label>
			</div>
		</div>
		<div class="item">
			<div class="gallary-bg gallary4">
				<div class="picture"></div>
			</div>
			<div class="introduction">
				<label class="main-label">香港活动</label>
				<br/>
				<label class="sub-label">奢侈消费大派送</label>
			</div>
		</div>
	</div>
</div>
<div class="newworld">
	<img src="images/newworld.png" alt="">
	<span class="arrow"></span>
	<div class="banner">
		<div class="title">
			<span>新世界/</span>
			<span class="number">01</span>
		</div>
		<p>新世界是一个新世界，这个世界充满着无穷的乐趣。新世界是一个新世界，这个世界充满着无穷的乐趣。新世界是一个新世界，这个世界充满着无穷的乐趣。新世界是一个新世界，这个世界充满着无穷的乐趣。</p>
		<input type="button" name="" value="更多详情">
		<div class="dot">
			<span class="active"></span>
			<span></span>
			<span></span>
		</div>
	</div>
</div>
<div class="about">
	<div class="item about-one">
		<span>新时代</span><br/>
		<span>关于爱生活的我们</span>
		<hr>
		<input type="button" name="" value="查看更多">
	</div>
	<div class="item about-two">
		<span>新时代</span><br/>
		<span>关于爱生活的我们</span>
		<hr>
		<input type="button" name="" value="查看更多">
	</div>
	<span class="arrow"></span>
	<div class="item about-three">
		<img src="images/woman.png">
	</div>
</div>
<div class="joinus">
	<div class="title">
		<span class="main-title">成为我们的志愿者</span>
		<hr>
		<span class="sub-title">新世界的大家庭需要每一个爱生活的人的加入，如果你够年轻，有梦想，有激情<br/>那就不要犹豫，快来加入我们，成为改变所有人生活的人</span>
	</div>
	<div class="info">
		<div class="protocal">
			<div class="message">
				<label>新世界志愿者协议</label>
				<span>加入新世界志愿者的人员必须遵守中华人民共和国的相关法律法规，并且本着平等资源的原则……</span>
			</div>
			<div class="message">
				<label>新世界志愿者协议</label>
				<span>加入新世界志愿者的人员必须遵守中华人民共和国的相关法律法规，并且本着平等资源的原则</span>
			</div>
			<div class="message">
				<label>新世界志愿者协议</label>
				<span></span>
			</div>
		</div>
		<form action="">
			<div>
				<input type="text" placeholder="姓名">
				<input type="text" placeholder="年龄">
			</div>
			<div>
				<input type="text" placeholder="联系方式">
				<input type="text" placeholder="联系地址">
			</div>
			<textarea name="" id="" cols="30" rows="5" placeholder="请简单描述您梦想的生活"></textarea>
			<input type="button" value="提交申请">
		</form>
	</div>
</div>
<footer class="footer">
	<div class="contact">
		<span class="main-contact">联系我们</span><br>
		<span class="sub">为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯<br>也可以通过以下任何方式关注我们的动态</span><br>
		<input class="email" type="text" name="" placeholder="someone@email.com">
		<input class="submit" type="button" name="" value="提交">
		<div class="contact-way">
			<img src="images/qq.png">
			<img src="images/blog.png">
			<img src="images/bird.png">
			<img src="images/earth.png">
		</div>
	</div>
	<div class="back">
		<div class="content">
			<span>@2016新世界</span>
			<span class="top">Back to top</span>
		</div>
	</div>
</footer>
</body>
</html>